<template>
  <div class="contains">
    <div class="iconfont header-back">&#xe624;</div>

    <img class="banner" :src="bannerImg">

    <div class="bottom_content">
      <div class="text">
        {{name}}
      </div>
      <div class="pic_content">
        <span class="iconfont banner-icon"></span>
        2
      </div>

    </div>
  </div>
</template>

<script>
  export default {
    name: 'DetailBanner',
    props: {
      bannerImg: String,
      name: String
    }
  }
</script>

<style lang="stylus" type="text/stylus" rel="stylesheet/stylus" scoped>
  @import '~styles/varibles.styl'
  @import '~styles/mixins.styl'
  /*.icons >>> .swiper-container*/
  .contains
    height 0
    background-color #cccccc
    padding-bottom 55%
    overflow hidden
    position relative

    .header-back
      top 0.1rem
      left 0.1rem
      background-color #333333
      width 0.4rem
      height 0.4rem
      text-align center
      line-height 0.4rem
      color white
      border-radius .2rem
      position absolute
      font-size 0.14rem

    .banner
      position absolute
      height 100%

    .bottom_content
      position absolute
      margin-left 0.1rem
      margin-bottom 0.05rem
      display flex
      text-align justify
      width 100%
      bottom 0

      .text
        flex 1
        line-height normal
        font-size 0.16rem
        color white

      .pic_content
        padding-bottom 0.02rem
        padding-top 0.02rem
        text-align center
        background-color #333333
        color: white
        width 0.65rem
        border-top-left-radius 0.1rem
        border-bottom-left-radius 0.1rem

</style>
